<template>
    <div class="data-container">
        <div class="main-fixed">
            <div class="main-header">数据库目录</div>
            <div class="main-body">
                <el-tree :data="dataDirectory" :props="defaultProps"
                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
            </div>
        </div>
         <div class="main-content">
            <div class="main-box">
                <div class="main-table">
                    <div>
                        <el-input v-model="searchText" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                        </el-input>
                        <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
                        <el-button style="marginLeft: 10px" size="small" @click="reset">重置</el-button>
                        <div style="float: right">
                            <el-button type="primary" icon="el-icon-plus" size="small" @click="newTableBtn">新建表</el-button>
                            <el-button size="small" @click="openTable">打开数据表</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-table
                :data="tableData" 
                ref='tableRef'
                v-loading="tableLoading"
                :row-key="getRowKeys" 
                :expand-row-keys="expands"
                highlight-current-row
                @expand-change="expandChange"
                @row-click="rowclick"
                style="width: 100%">
                 <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table
                            :data="detailsData"
                            v-loading="detailsDataLoading"
                            maxHeight="400"
                            size="small" style="margin-left: 58px;width: 95%;">
                            <el-table-column v-for="(item,index) in fieldData" :key="index" :prop="item.name" :label="item.name"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                        </el-table>
                    </template>
                 </el-table-column>
                  <el-table-column
                    label="表名"
                    prop="tableName">
                </el-table-column>
                <el-table-column
                    label="表备注"
                    prop="tableComment">
                </el-table-column>
            </el-table>
            <el-pagination background :layout="layout" :total="total" :page-size="page.pageSize" :page-sizes="pageSizes"
              :current-page="page.pageNo" style="float:right;marginTop:20px;marginBottom:20px;" @size-change="sizeChange"
              @current-change="currentChange">
            </el-pagination>
         </div>
        <newTable ref="newTableRef" @closeNewTable="closeNewTable"  @sumbitNewTable="sumbitNewTable" 
        :selectTreeData='this.selectDatabase && this.selectDatabase.id'  v-if="openNewTable" :treeData="dataDirectory"/>
        <dataTable ref="dataTableRef" @closeDataTable="closeDataTable"  v-if="openDataTable" 
        :id='this.selectDatabase && this.selectDatabase.id' :tableName='this.selectRow && this.selectRow.tableName'/>
    </div>
</template>

<script>
import newTable from  './newTable.vue'
import dataTable from  './dataTable.vue'
import { getIpGroupChildren, getLibraryList, getColumnList} from '@/api/dataManagement/dataFields'
export default {
    name: 'sheet',
    components: {
        newTable,
        dataTable
    },
    data() {
        return {
            searchText: '',
            openNewTable: false,
            openDataTable: false,
            tableLoading: false,
            detailsDataLoading: false,
            dataDirectory: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                    label: '三级 1-1-1'
                    }]
                }]
            }],
            defaultProps: {
                children: 'ipGroupChildren',
                label: 'labelName'
            },
            tableData: [],
            detailsData: [], //表里面详细的table
            total: 0, //总数
            layout: "prev, pager, next,sizes,jumper", //分页显示布局
            pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
            page: {
                pageNo: 1,
                pageSize: 10
            },
            // 获取row的key值
            getRowKeys(row) {
                return row.id;
            },
            // 要展开的行，数值的元素是row的key值
            expands: [],
            selectRow: {},  //当前选中的表
            selectDatabase: {}, //当前选中的数据库
            tableName: '',
            id:'',
            fieldData: [],

        }
    },
    created() {
        this.getTreeList()
    },
    methods: {
        getTreeList() {
            getIpGroupChildren().then((res) => {
                if(res.code === 0 ) {
                    res.data && res.data.forEach(element => {
                        element.labelName =  element.ip
                        if(element.ipGroupChildren){
                             element.ipGroupChildren && element.ipGroupChildren.forEach(item => {
                                item.labelName = item.databaseName
                             })
                        }
                    })
                    this.dataDirectory = res.data
                }
            })
        },
        closeNewTable() {
            this.openNewTable = false
        },
        sumbitNewTable() {
            this.openNewTable = false
            this.getList()
        },
        searchChange() {
            if(JSON.stringify(this.selectDatabase) == '{}'){
                this.$message.warning('请先选择数据库')
                return
            }
            this.$refs.tableRef.setCurrentRow();
            this.selectRow = {}
            this.expands = [];
            this.page.pageNo = 1;
            this.getList()
        },
        reset() {
            if(JSON.stringify(this.selectDatabase) == '{}'){
                this.$message.warning('请先选择数据库')
                return
            }
            this.$refs.tableRef.setCurrentRow();
            this.selectRow = {}
            this.expands = [];
            this.searchText = ''
            this.page.pageNo = 1;
            this.getList()
        },
        newTableBtn() { //新建表
            if(JSON.stringify(this.selectDatabase) == '{}'){
                this.$message.warning('请选择数据库');
            }else{
                this.openNewTable = true
            }
        },
        openTable() {
            if(JSON.stringify(this.selectDatabase) == '{}'){
                this.$message.warning('请选择数据库');
            }else if( JSON.stringify(this.selectRow) == '{}'){
                this.$message.warning('请选择数据表');
            }else{
                 this.openDataTable = true
            }
        },
        closeDataTable() {
            this.openDataTable = false
        },
        getList() {
            if(this.selectDatabase.id || this.selectDatabase.id == 0){
                this.tableLoading = true
                const data = {
                    ...this.page,
                    id: this.selectDatabase.id,
                    keyword: this.searchText
                }
                getLibraryList(data).then((res) => {
                    if(res.code === 0){
                        this.tableData = res.data.records
                        this.total = res.data.total
                        this.tableLoading = false
                    }
                })
            }
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.selectDatabase = data
            this.getList();
        },
         //每页条数改变
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.page.pageNo = 1
        this.tableLoading = true
        this.getList()
      },
      //页码改变
      currentChange(current) {
        this.page.pageNo = current
        this.tableLoading = true
        this.getList()
      },
        //表格当前行被展开或收起
     expandChange(row, expandedRows) {
            let that = this;
            //只展开一行
            if (expandedRows.length) {
                this.detailsDataLoading = true
                const data = {
                    id: this.selectDatabase && this.selectDatabase.id,
                    tableNameList: [row.tableName]
                }
                getColumnList(data).then((res) => {
                    if(res.code === 0){
                        this.detailsData = res.data.rowObject
                        this.fieldData = res.data.columns
                        this.detailsDataLoading = false
                    }
                })
                //说明展开了
                that.expands = [];
                if (row) {
                    that.expands.push(row.id); //只展开当前行id
                }
            } else {
                //说明收起了
                that.expands = [];
            }
        },
        // 当前选择的表格
        rowclick(row){
            this.selectRow = row
            console.log(row,'jjj')
            console.log(this.expands,'hmr999')
        }
    }
}
</script>

<style lang="scss" scoped>
// 修改选中的样式
    ::v-deep.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
        color: #368fff;
    }   
  .data-container{
    height: 100%;
    padding: 20px;
    .main-fixed{
        float: left;
        width: 200px;
        height: 100%;
        position: relative;
        z-index: 1;
        .main-header{
            height: 40px;
            padding-left: 10px;
            font-size: 16px;
            line-height: 40px;
            font-weight: 400;
            color: #333;
        }
        .main-body{
            height: calc(100% - 40px);
            padding: 10px 0 0;
            border-top: 1px solid #f2f2f2;
            overflow-y: auto;
        }
    }
    .main-content{
        position: relative;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 230px;
        .main-box{
            position: relative;
            height: 100%;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .main-table{
            padding-top: 0!important;
            z-index: 2;
            width: 100%;
            height: 100%;
            overflow: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    }
  }
</style>